<template>
  <el-dialog
    :title="title + '友情链接'"
    :visible.sync="isShow"
    width="45%"
    @close="cancel"
  >
    <el-form
      ref="formRef"
      :rules="formRules"
      :model="formData"
      class="info-form"
      label-width="140px"
    >
    <el-form-item label="链接类型" prop="type">
            <el-select size="medium" v-model="formData.type" placeholder="请选择">
              <el-option value="1" label="文字链接"></el-option>
              <el-option value="2" label="图片链接"></el-option>
            </el-select>
          </el-form-item>

   <el-form-item label="标题" v-if="formData.type*1===1" prop="title">
            <el-input style="width:420px"
              size="medium"
              v-model="formData.title"
              placeholder="请输入标题名称"
            ></el-input>
          </el-form-item>

    <el-form-item label="链接地址" prop="url">
            <el-input style="width:420px"
              size="medium"
              v-model="formData.url"
              placeholder="请输入链接地址名称"
            ></el-input>
          </el-form-item>

          <el-form-item label="链接描述" prop="des">
            <el-input style="width:420px"
              size="medium"
              v-model="formData.des"
              placeholder="请输入链接描述名称"
              type="textarea"
              :rows="2"
            ></el-input>
          </el-form-item>

          <el-form-item label="链接图片" v-if="formData.type*1===2" prop="img">
             <image-upload
                v-model="formData.img"
                field-name="file"
                :limit="1"
                :upload-fn="uploadFile"
              ></image-upload>
          </el-form-item>

    </el-form>
    <div slot="footer">
      <el-button @click="cancel" size="small">取消</el-button>
      <el-button type="primary" size="small" @click="submit">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addData, updateData, getInfoData } from '@/api/adv/link'
import { uploadFile } from '@/api'
import { deepClone } from '@/utils'
const formRules = {
  des: [{ required: true, message: '链接描述类型必须！', trigger: 'blur' }],
  img: [{ required: true, message: '链接图片类型必须！', trigger: 'blur' }],
  title: [{ required: true, message: '标题类型必须！', trigger: 'blur' }],
  type: [{ required: true, message: '链接类型类型必须！', trigger: 'blur' }],
  url: [{ required: true, message: '链接地址类型必须！', trigger: 'blur' }]
}
const defaultItem = {
  des: '', // 链接描述
  img: '', // 链接图片
  title: '', // 标题
  type: '', // 链接类型
  url: '' // 链接地址
}
export default {
  name: 'linkInfo',
  data () {
    return {
      isShow: false,
      isAdd: true,
      formData: deepClone(defaultItem),
      formRules
    }
  },
  computed: {
    title () {
      return this.isAdd ? '添加' : '修改'
    }
  },
  methods: {
    uploadFile,
    //  获取单行信息回显
    async getInfo (id) {
      this.formData = await getInfoData(id)
      this.formData.img = this.formData.img
        ? this.formData.img.split(',')
        : []
      this.isAdd = false
      this.isShow = true
    },
    //  增加或更新提交
    async submit () {
      //  验证
      try {
        await this.$refs.formRef.validate()
      } catch (error) {
        return this.$message.warning('验证失败')
      }
      // 处理
      const formData = JSON.parse(JSON.stringify(this.formData))
      formData.img = formData.img.length
        ? formData.img.join()
        : null
      //  提交
      if (this.isAdd) {
        await addData(formData)
        this.$message.success('添加成功')
      } else {
        await updateData(formData)
        this.$message.success('修改成功')
      }
      // 更新列表
      this.$emit('update-list')
      // 关闭
      this.cancel()
    },
    cancel () {
      this.isShow = false
      this.isAdd = true
      this.formData = deepClone(defaultItem)
      this.$refs.formRef.clearValidate()
    }
  }
}
</script>
<style scoped></style>
